import React,{useState} from "react";
import {
    Form,
    Input,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    AutoComplete,
} from 'antd';
import 'antd/dist/antd.min.css'

const { Option } = Select;

const residences = [
    {
        value: '机关',
        label: '机关',
        children: [
            {
                value: '科创中心',
                label: '科创中心',
                children: [
                    {
                        value: '软件部',
                        label: '软件部',
                    },
                ],
            },
        ],
    },
    {
        value: '分公司',
        label: '分公司',
        children: [
            {
                value: '事业部',
                label: '事业部',
                children: [
                    {
                        value: '项目部',
                        label: '项目部',
                    },
                ],
            },
        ],
    },
];


const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};

const SinForm = (v) => {
    const [form] = Form.useForm();

    const onFinish = (values) => {
        console.log('Received values of form: ', values);
    };
    // const prefixSelector = (
    //     <Form.Item name="prefix" noStyle>
    //         <Select
    //             style={{
    //                 width: 70,
    //             }}
    //         >
    //             <Option value="86">+86</Option>
    //             <Option value="87">+87</Option>
    //         </Select>
    //     </Form.Item>
    // );

    const [autoCompleteResult, setAutoCompleteResult] = useState([]);

    const onWebsiteChange = (value) => {
        if (!value) {
            setAutoCompleteResult([]);
        } else {
            setAutoCompleteResult(['.com', '.org', '.net'].map((domain) => `${value}${domain}`));
        }
    };

    const websiteOptions = autoCompleteResult.map((website) => ({
        label: website,
        value: website,
    }));
    return <Form
            {...formItemLayout}
            form={form}
            name="register"
            onFinish={onFinish}
            initialValues={{
                'u:dp': ['A分公司', 'B事业部', 'C项目部'],
                'u:lvl': ['机关处室', '科长', '查看'],
                // prefix: '86',

            }}
            scrollToFirstError
        >
            <Form.Item
                name="u:name"
                label="姓名"
                rules={[
                    // {
                    //     type: 'email',
                    //     message: 'The input is not valid E-mail!',
                    // },
                    {
                        required: true,
                        message: '请输入姓名',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                name="u:pwd"
                label="密码"
                rules={[
                    {
                        required: true,
                        message: '请输入密码',
                    },
                ]}
                hasFeedback
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                name="confirm"
                label="确认密码"
                dependencies={['u:pwd']}
                hasFeedback
                rules={[
                    {
                        required: true,
                        message: '请再次输入密码',
                    },
                    ({ getFieldValue }) => ({
                        validator(_, value) {
                            if (!value || getFieldValue('u:pwd') === value) {
                                return Promise.resolve();
                            }

                            return Promise.reject(new Error('两次密码必须一致'));
                        },
                    }),
                ]}
            >
                <Input.Password />
            </Form.Item>

            {/*<Form.Item*/}
            {/*    name="nickname"*/}
            {/*    label="Nickname"*/}
            {/*    tooltip="What do you want others to call you?"*/}
            {/*    rules={[*/}
            {/*        {*/}
            {/*            required: true,*/}
            {/*            message: 'Please input your nickname!',*/}
            {/*            whitespace: true,*/}
            {/*        },*/}
            {/*    ]}*/}
            {/*>*/}
            {/*    <Input />*/}
            {/*</Form.Item>*/}

        <Form.Item
            name="u:dp"
            label="所属机构"
            rules={[
                {
                    type: 'array',
                    required: true,
                    message: '请选择所属机构',
                },
            ]}
        >
            <Cascader options={residences} />
        </Form.Item>
        <Form.Item
            name="u:lvl"
            label="岗位"
            rules={[
                {
                    type: 'array',
                    required: true,
                    message: '请选择所属机构',
                },
            ]}
        >
            <Cascader options={residences} />
        </Form.Item>
        {/*<Form.Item*/}
        {/*        name="phone"*/}
        {/*        label="Phone Number"*/}
        {/*        rules={[*/}
        {/*            {*/}
        {/*                required: true,*/}
        {/*                message: 'Please input your phone number!',*/}
        {/*            },*/}
        {/*        ]}*/}
        {/*    >*/}
        {/*        <Input*/}
        {/*            addonBefore={prefixSelector}*/}
        {/*            style={{*/}
        {/*                width: '100%',*/}
        {/*            }}*/}
        {/*        />*/}
        {/*    </Form.Item>*/}

            {/*<Form.Item*/}
            {/*    name="website"*/}
            {/*    label="Website"*/}
            {/*    rules={[*/}
            {/*        {*/}
            {/*            required: true,*/}
            {/*            message: 'Please input website!',*/}
            {/*        },*/}
            {/*    ]}*/}
            {/*>*/}
            {/*    <AutoComplete options={websiteOptions} onChange={onWebsiteChange} placeholder="website">*/}
            {/*        <Input />*/}
            {/*    </AutoComplete>*/}
            {/*</Form.Item>*/}

            {/*<Form.Item label="Captcha" extra="We must make sure that your are a human.">*/}
            {/*    <Row gutter={8}>*/}
            {/*        <Col span={12}>*/}
            {/*            <Form.Item*/}
            {/*                name="captcha"*/}
            {/*                noStyle*/}
            {/*                rules={[*/}
            {/*                    {*/}
            {/*                        required: true,*/}
            {/*                        message: 'Please input the captcha you got!',*/}
            {/*                    },*/}
            {/*                ]}*/}
            {/*            >*/}
            {/*                <Input />*/}
            {/*            </Form.Item>*/}
            {/*        </Col>*/}
            {/*        <Col span={12}>*/}
            {/*            <Button>Get captcha</Button>*/}
            {/*        </Col>*/}
            {/*    </Row>*/}
            {/*</Form.Item>*/}

            {/*<Form.Item*/}
            {/*    name="agreement"*/}
            {/*    valuePropName="checked"*/}
            {/*    rules={[*/}
            {/*        {*/}
            {/*            validator: (_, value) =>*/}
            {/*                value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),*/}
            {/*        },*/}
            {/*    ]}*/}
            {/*    {...tailFormItemLayout}*/}
            {/*>*/}
            {/*    <Checkbox>*/}
            {/*        I have read the <a href="">agreement</a>*/}
            {/*    </Checkbox>*/}
            {/*</Form.Item>*/}
            <Form.Item {...tailFormItemLayout}>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
            </Form.Item>
        </Form>

}
export default SinForm